<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 获取数据仓库中的变量 -->
        <p>{{ name }}</p>
        <p>{{ age }}</p>
        <p>{{ user }}</p>
        <p>{{ user.id }}</p>
        <p>{{ user.username }}</p>
        <p>{{ nums[0] }}</p>
        <p>{{ sex }}</p>
        <p>{{ hobby }}</p>
        <!-- <p>{{ address }}</p> -->
        <hr>

        <!-- 简单的JS表达式 -->
        <p>{{ age+2 }}</p>
        <p>{{ age>=18 ? '成年' : '未成年' }}</p>
        <hr>

        <!-- JS内置对象 -->
        <p>{{ new Date() }}</p>
        <p>{{ Math.ceil(2.1) }}</p>

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'tom',
            age:20,
            user:{
                id:101,
                username:'admin'
            },
            nums:[1,2,3],
            sex:null,
            hobby:undefined,
        }
    })
</script>
</html>